<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <style>
        .btn{
            display:inline-block;
            padding:6px 12px;
            background: #6ec2ff;
            cursor: pointer;
            color:#fff;
            border-radius:3px;
        }
        .btn:hover{
            background: #82caff;
        }
        #ajax-jsonp{
            color:#f00;
            padding:20px;
        }
    </style>
</head>
<body>

<div style="margin-bottom:50px;">
    <h2>ajax-jsonp跨域请求:</h2>
    jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。
    需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。
</div>


<span class="btn" onclick="getAjaxJsonData()">getData</span>
<div id="ajax-jsonp"></div>
</body>
<script >
    /**
     *对于经常用jQuery的开发者来说，
     * 能注意到jQuery封装的$.ajax中有一个dataType属性，
     * 如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。
     * 需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。
     */
    var url = 'https://www.toutiao.com/api/pc/hot_gallery/?widen=1'

    function ajaxJsonpRequest(){
        $.ajax({
            async : true,
            url : url,
            type : "GET",
            dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
            jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handleResponse', //设置回调函数名
            data : {
                type:'ajax-jsonp'
            },
            success: function(response, status, xhr){
                console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                console.log(response);

            }
        });
    }

    function handleResponse(data){
        var ajaxJsonp = document.getElementById('ajax-jsonp')
        ajaxJsonp.innerHTML = data.data[0].title
    }

    function getAjaxJsonData(){
        ajaxJsonpRequest()
    }
</script>
</html>